const mxItem = require('../../behaviors/form/mx-item');
import {
  nxValidator
} from '../nx-validator';

Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多 slot 支持
  },
  behaviors: [mxItem],
  properties: {
    // 选项
    columns: {
      type: Array,
      value: [],
    },
    // 模式 single-单选  multiple-多选
    mode: {
      type: String,
      value: 'single', // single  multiple
    },
    // 自动折叠
    autoCollapse: {
      type: Boolean,
      value: true,
    },
    // 选项只有一个时，自动选中
    autoSelect: {
      type: Boolean,
      value: true,
    },
  },
  data: {
    collapsed: false, // 是否折叠
    columnsCurrent: [], // 当前选项
  },
  methods: {
    // 选中选项
    toggle(e) {
      let {
        value,
        text,
        mode,
        name,
        autoCollapse,
        columns,
        collapsed
      } = this.data;
      const {
        value: valuePrev
      } = this.data;
      const dat = this.data;
      const {
        item: {
          value: v,
          text: t,
          disabled
        },
        from
      } = e.currentTarget.dataset;
      let d = {};
      console.log(e)

      if (disabled) {
        return;
      }

      // 当是折叠状态且有值时，且事件不是来源于columnsObserver，直接展开选项
      if (collapsed && value && from !== 'columnsObserver') {
        this.toggleCollapsed();
        return;
      }

      // 多选
      if (mode === "multiple") {
        if (!Array.isArray(value)) {
          value = [];
          text = [];
        }

        const idx = value.findIndex(j => j == v);
        if (idx > -1) {
          value.splice(idx, 1);
          text.splice(idx, 1);
        } else {
          value.push(v);
          text.push(t);
        }

      }
      // 单选
      else {
        value = v;
        text = t;
        // 自动折叠，并将选项改为只有选中项
        if (autoCollapse) {
          d.collapsed = autoCollapse;
          d.columnsCurrent = [{
            // 这里不需要判断值的有效性，因为前面已经将无效值返回了
            ...columns.find(i => i.value === value),
          }]
        }
        // 事件来源于columnsObserver，需要更新columnsCurrent
        else if (from === 'columnsObserver') {
          d.columnsCurrent = [...columns];
        }
      }

      this.setData({
        valuePrev: value,
        value,
        text,
        ...d,
      });

      // 验证数据
      nxValidator(dat, value).then(() => {
        this.setData({
          errorMessage: dat.errorMessage,
        });
      });

      // 触发事件
      if (value && JSON.stringify(value) !== JSON.stringify(valuePrev)) {
        this.triggerEvent('change', {
          field: name,
          value,
          text
        });
      } else {
        this.triggerEvent('change', {
          field: name,
          value: valuePrev,
          text
        });
      }
    },
    // 开合选项
    toggleCollapsed(e) {
      const {
        collapsed,
        columns,
        value
      } = this.data;
      let d = {};
      d.collapsed = !collapsed;

      // 控制折叠后的选项
      if (d.collapsed) {
        const f = columns.find(i => i.value === value && i.disabled !== true);
        if (f) {
          d.columnsCurrent = [{
            ...f,
          }];
        } else {
          d.columnsCurrent = [...columns];
        }
      } else {
        d.columnsCurrent = [...columns];
      }

      this.setData(d);
    },
  },
  observers: {
    'columns': function (c) {
      const {
        columnsCurrent,
        value,
        collapsed,
        autoSelect,
        mode,
      } = this.data, d = {};
      if (c.length !== 0) {
        // 只有columns改变了，才会有其他逻辑
        if (JSON.stringify(columnsCurrent) !== JSON.stringify(c)) {
          // 自动选中
          const select = () => {
            if (autoSelect) {
              // 有效的选项
              const validColumns = c.filter(i => i.disabled !== true);
              // 有且仅有一个
              if (validColumns.length === 1) {
                this.toggle({
                  currentTarget: {
                    dataset: {
                      item: validColumns[0],
                      from: 'columnsObserver',
                    }
                  }
                });
                return true;
              }
            }
            return false;
          }

          // 单选模式才有自动选中
          // 如果选中了，所有更新操作交给选中函数（如columnsCurrent、value、collapsed）
          if (mode === 'single' && select()) {
            return;
          }
          // 如果没有选中
          else {
            d.columnsCurrent = [...c];

            // 有值
            if (value) {
              const f = c.find(i => i.value === value && i.disabled !== true);
              // 值有效
              if (f) {
                // 选项改为当前值的选项，且折叠选项
                d.columnsCurrent = [{
                  ...f,
                }];
                d.collapsed = true;
              }
              // 值无效，清空值，且展开选项
              else {
                d.value = null;
                d.collapsed = false;
              }
            }
          }
        }
        this.setData(d);
      } else {
        this.setData(d);
      }
    },
  },
})